<template>
  <el-tabs type="border-card">
    <el-tab-pane label="福卡参数设置" class="swiper-container">
      <el-table v-loading="state.loading" ref="multipleTable" :data="state.tableData" tooltip-effect="dark"
        style="width: 100%" @selection-change="selectionChangeIds">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="#ID" width="55" align="center">
          <template #default="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="福卡名称" align="center">
          <template #default="scope">
            <el-input v-model.trim="scope.row.title"
              @blur="updatedTitle($event, scope.row)"
              :input-style="{
              textAlign: 'center'
            }"/>
          </template>
        </el-table-column>
        <el-table-column label="设置比例" align="center" width="400">
          <template #default="scope">
            <el-input v-model.trim="scope.row.rate" @change="updated(scope.row)"
              :input-style="{
                textAlign: 'right'
              }">
              <template #append>%</template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column class="orderby" label="排序值" align="center">
          <template #default="scope">
            <el-input v-model.number="scope.row.orderby"
              @change="updated(scope.row)"
              :input-style="{
                textAlign: 'center'
              }"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="隐藏/显示" align="center" width="200">
          <template #default="scope">
            <el-switch v-model="scope.row.hide"
              :active-value="1"
              :inactive-value="2"
              @change="updated(scope.row)"></el-switch>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="福卡规则说明" class="foka-container">
      <span class="foka-title">福卡：</span>
      <div class="foka-list">
        <span v-for="item in state.tableData" :key="item.id" style="padding: 5px 3px;">
          <el-tag type="success" size="large" style="font-size: 16px;">{{ item.title }}</el-tag>
        </span>
      </div>
      <span class="foka-title">规则：</span>
      <div class="foka-rule">
        <p>1.每消费五十元，奖励抽奖集福抽奖福袋一个，多卖多送</p>
        <p>2.集齐
          <el-tag type="success" style="font-size: 14px;">{{ getFokaName(1) }}</el-tag>
          四字，可领取奖金池金额一万元
        </p>
        <p>3.集齐
          <el-tag type="success" style="font-size: 14px;">{{ getFokaName(0) }}</el-tag>
          七字，可领取奖金池内累计金额的50%
        </p>
        <p>4.消费储值累计积分，年度消费积分第一名奖励金额(根据实际情况奖励额度)</p>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import { AdminConfigFokaGet, AdminConfigFokaPut } from "../../api/server/config";

const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  checkedIds: [], // 选中项
  total: 0, // 总条数
});

const getFokaName = (flag) => {
  let str = state.tableData.map(d => d.title).join('')
  return !!flag ? str.substring(0, 4) : str;
}

onMounted(() => {
  getList()
})

const getList = () => {
  state.loading = true;
  AdminConfigFokaGet().then((list) => {
    console.info(list)
    state.tableData = list
    state.total = list?.length
    state.loading = false;
  });
}

const selectionChangeIds = row => {
  state.checkedIds = row;
}

const updatedTitle = (event, row) => {
  if (!row.title) {
    ElMessage.error('请填写福卡名称')
    event.target.focus()
    return;
  }
  updated(row);
}

const updated = row => {
  row.rate = row.rate || 0
  row.orderby = row.orderby || 0

  AdminConfigFokaPut(row.id, row).then((res) => {
    ElMessage.success('操作成功')
  })
}

</script>

<style scoped>
.foka-list, .foka-rule {
  margin-left: 36px;
}

.foka-title {
  display: block;
  margin: 10px 0;
  padding: 10px 15px;
  font-size: 16px;
  color: #333333;
  font-weight: 600;
  background-color: #eee;
  border-radius: 3px;
}

.foka-title:not(:first-child) {
  margin-top: 16px;
}

.foka-rule p {
  font-size: 16px;
  margin: 8px;
  color: #909399;
}

.el-card.is-always-shadow {
  min-height: 100% !important;
}

.el-input {
  width: 180px;
}

</style>
